import canvas01 from './canvas01.js';
import canvas02 from './canvas02.js';
import canvas03 from './canvas03.js';
import canvas04 from './canvas04.js';
import canvas05 from './canvas05.js';
import canvas06 from './canvas06.js';
import canvas07 from './canvas07.js';
import canvas08 from './canvas08.js';

const canvasList = [
  canvas01,
  canvas02,
  canvas03,
  canvas04,
  canvas05,
  canvas06,
  canvas07,
  canvas08
];

const setStle = (ele) => {
  ele.style.width = '100vw';
  ele.style.height = '100vh';
  // ele.style.backgroundColor = '#000';
  ele.style.position = 'fixed';
  ele.style.top = '0';
  ele.style.left = '0';
  ele.style.zIndex = '-10000';
  document.body.style.backgroundColor = 'transparent';
};

const createEle = () => {
  let ele = document.createElement('div');
  document.body.appendChild(ele);
  return ele;
};

let canvasTools = {
  // 随机背景特效
  randCanvas: (ele) => {
    if (!ele) {
      ele = createEle();
    }
    let index = parseInt(Math.random() * canvasList.length);
    console.log('info:', ele, index);
    canvasTools.indexCanvas(index, ele);
  },
  // 指定索引背景特效
  indexCanvas: (index, ele) => {
    if (!ele) {
      ele = createEle();
    }
    setStle(ele);
    console.log('indexCanvas:', index, canvasList[index]);
    canvasList[index].startAnimate(ele);
  }
};

export default canvasTools;
export { canvasTools as canvasTools };
